<script setup lang="ts">
import {Tag} from 'ant-design-vue';
import {Page} from '#/components/common-ui';
import {useVxeGrid} from '#/ui-kit';

import {findLoginLogListPage} from '#/api/system/log';

const [Grid, gridApi] = useVxeGrid({
  tableTitle: '登录日志',
  gridOptions: {
    columns: [
      {fixed: 'left', title: '#', type: 'seq', minWidth: 50},
      {field: 'username', title: '用户账号', minWidth: 120,},
      {
        field: 'ip', title: 'IP 地址', minWidth: 120, formatter: ({cellValue}) => {
          return cellValue ? cellValue : '-';
        }
      },
      {
        field: 'os', title: '操作系统', minWidth: 120, formatter: ({cellValue}) => {
          return cellValue ? cellValue : '-';
        }
      },
      {
        field: 'browser', title: '浏览器', minWidth: 120, formatter: ({cellValue}) => {
          return cellValue ? cellValue : '-';
        }
      },
      {slots: {default: 'status'}, title: '登录状态', minWidth: 80,},
      {field: 'loginTime', title: '登录时间', formatter: 'formatDateTime', minWidth: 180,},
      {field: 'createTime', title: '创建时间', formatter: 'formatDateTime', minWidth: 180,},
    ],
    proxyConfig: {
      ajax: {
        query: async ({page}, formValues) => {
          return await getLoginLogListPage({
            pageNumber: page.currentPage,
            pageSize: page.pageSize,
            ...formValues
          });
        },
      }
    },
    stripe: true,
    keepSource: true,
    height: 'auto',
    toolbarConfig: {
      custom: true,
      refresh: true,
      zoom: true,
    },
  },
  formOptions: {
    fieldMappingTime: [['loginTimeRange', ['beginTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
    commonConfig: {
      componentProps: {
        allowClear: true,
      }
    },
    schema: [
      {
        label: '用户账号',
        fieldName: 'username',
        component: 'Input',
        componentProps: {
          placeholder: '请输入用户账号',
        },
      },
      {
        label: 'IP 地址',
        fieldName: 'code',
        component: 'Input',
        componentProps: {
          placeholder: '请输入 IP 地址',
        },
      },
      {
        label: '登录状态',
        fieldName: 'status',
        component: 'Select',
        componentProps: {
          options: [
            {value: 0, label: '成功'},
            {value: 1, label: '失败'},
          ],
          placeholder: '请选择登录状态',
        },
      },
      {
        label: '登录时间',
        fieldName: 'loginTimeRange',
        component: 'RangePicker',
        componentProps: {
          showTime: true,
          placeholder: ['开始时间', '结束时间'],
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
      }
    ],
    showCollapseButton: true,
    collapsed: true,
  },
});

const getLoginLogListPage = (params) => {
  return new Promise<{ items: any; total: number }>((resolve) => {
    findLoginLogListPage(params).then(res => {
      resolve({
        items: res.records,
        total: res.totalRow,
      });
    }).catch(() => {
      resolve({
        items: [],
        total: 0,
      });
    })
  });
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #status="{row}">
        <Tag :color="row.status === 0 ? 'green' : row.status === 1 ? 'error' : ''">{{
            row.status === 0 ? '成功' : row.status === 1 ? '失败' : '未知'
          }}
        </Tag>
      </template>
    </Grid>
  </Page>
</template>